<template>
  <div class="view-container">
    <div class="msg-content view">
      <div v-if="total>0" class="msg-all">

        <!-- 清空按钮-->
        <div class="msg-info clearfix msg-info-wrap">
          <a @click="clearBtn" class="fr">清空所有消息</a>
        </div>

        <!-- 内容-->
        <div class="msg-list">
          <ul>
            <li class="msg-read" v-for="(item,index) in messageList" :key="index">
              <span class="msg-type">{{ item.messageTitle }}</span>
              <i v-if="item.readStatus=='0'" class="iconfont icon-xin"
                 style="font-size: 22px;position: absolute;top: 2px;left: -10px;color: red;"
              ></i>
              <span class="msg-title">
                <a target="_blank" href="javascript:void(0)">{{ item.fromName }}</a>{{ item.messageContent }}
              </span>
              <a @click="handleDelete(item)" class="btn-rush csdnc-trash">
                <i
                  style="font-family: iconfont !important;font-size: 15px;font-style: normal; -webkit-font-smoothing: antialiased;"
                  class="icon-shanchu"
                ></i>
              </a>
              <p class="msg-text clearfix">
              <span class="bb-span-wrap">
              <a v-if="item.messageTitle=='论坛'" href="javascript:void(0)" @click="btnClick(item)">{{ item.payload.forumTitle }}</a>
              <a v-if="item.messageTitle=='动态'" href="javascript:void(0)" @click="btnClick(item)">{{ item.payload.remark }}</a>
              </span>
                <em class="fr">{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</em>
              </p>
            </li>
          </ul>
        </div>

        <!-- 分页-->
        <div class="page-box">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getMessageInfo"
          />
        </div>

      </div>

      <div v-else class="msg-all">
        <div class="msg-message">
          <img src="../../assets/images/user/zhanwu03.jpeg">
          <p>空空如也</p></div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listMessage, listMessageBD, getMessage, delMessage, delMessageReadStatus1 } from '@/api/message'
import { globalBus } from '@/utils/globalBus'

export default {
  name: 'notify',
  data() {
    return {
      messageList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        status: '0',
        toId: undefined,
        type: '1'
      },
      total: 0,
      ids: [],
      open: false,
      messageById: ''
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
    this.getMessageInfo()
  },
  methods: {
    // 刷新消息未读条数
    refresh() {
      globalBus.$emit('messageTotle', 'messageTotle')
    },
    //获取消息
    getMessageInfo() {
      this.queryParams.toId = this.user.userId
      listMessage(this.queryParams).then(response => {
        this.messageList = response.rows
        this.messageList.map(item=>{
          item.payload = JSON.parse(item.payload)
        })
        this.total = response.total
      })
    },

    //跳转社团
    jumpClick1() {
      this.open = false
      this.$router.push('/user/profile')
      this.refresh()
      this.getMessageInfo()
    },
    jumpClick2() {
      this.open = false
      sessionStorage.removeItem('deptListName')
      sessionStorage.removeItem('deptName')
      this.$router.push('/dept/index')
      this.refresh()
      this.getMessageInfo()
    },
    //关闭
    onClose() {
      this.refresh()
      this.getMessageInfo()
    },
    //点击按钮
    async btnClick(row) {
      await delMessageReadStatus1(row.messageId)

      if(row.messageTitle=="论坛"){
        this.$router.push({
          path: '/forum/edit',
          query: {
            id: row.payload.forumId
          }
        })
      }else {
        this.$router.push({
          path: '/trends/edit',
          query: {
            id: row.payload.trendsId
          }
        })
      }
    },

    //清空所有按钮
    clearBtn() {
      this.ids = this.messageList.map(item => item.messageId)
      this.$confirm('你确定清空所有消息吗？', '消息清空', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMessage(this.ids).then(res => {
          if (res.code === 200) {
            this.getMessageInfo()
            this.refresh()
            this.msgSuccess('清空所有消息成功')
          } else {
            console.log('清空消息失败:', res.msg)
            this.msgError('清空所有消息失败')
          }
        })
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('你确定删除本条消息吗？', '消息删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMessage(row.messageId).then(res => {
          if (res.code === 200) {
            this.getMessageInfo()
            this.refresh()
            this.msgSuccess('删除消息成功')
          } else {
            console.log('删除消息失败:', res.msg)
            this.msgError('删除消息失败')
          }
        })
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-pagination {
  padding: 2px 5px !important;
}

/deep/ .el-pagination__total {
  margin-right: 10px !important;
}

/deep/ .el-pagination__sizes {
  margin: 0 10px 0 0 !important;
}

/deep/ .el-pagination.is-background .btn-next, /deep/ .el-pagination.is-background .btn-prev, /deep/ .el-pagination.is-background .el-pager li {
  margin: 0 5px !important;
}

/deep/ .el-pager li {
  padding: 0 4px !important;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

/deep/ .el-pagination__jump {
  margin-left: 24px !important;
  font-weight: 400;
  color: #606266;
}

/deep/ .el-pagination__editor {
  padding: 0 2px !important;
  margin: 0 2px !important;
}
</style>
